<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>带进度条 md5 验证组件 layUploader - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="整合百度 WebUploader 上传插件，里面含上传进度条，md5 验证查看文件是否存在，达到文件秒传"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>带进度条 md5 验证组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">layUploader</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/4966584/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">St**m</cite> <img src="/images/fly/avatar/8.jpg" alt="St**m"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>整合百度 WebUploader 上传插件，里面含上传进度条，md5 验证查看文件是否存在，达到文件秒传</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">创建：2018-12-10 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        BUG，肯定有。
       <br>问题，肯定有。
       <br>具体还需测试......
       <br>
       <br>
       <img src="/upload/2018_12/4966584_1543916062104_80385.gif"> 
       <br>
       <img src="/upload/2018_12/4966584_1543916077253_70500.jpg"> 
       <br>
       <div class="layui-elem-quote">
        目录结构
       </div>
       <img src="/upload/2018_12/4966584_1543916758146_69335.jpg"> 
       <br>
       <div class="layui-elem-quote">
         注意
        <br>webuploader.js中修改了一点点位置，如果不想搞，直接用我上传的
       </div>
       <img src="/upload/2018_12/4966584_1543916677116_69247.jpg"> 
       <br>
       <br>
       <br>
       <hr>
       <div class="layui-elem-quote">
         用法
       </div>
       <pre>&lt;script&gt;<br>        layui.config({<br>            base: '../layui_exts/' <br>            ,version: '1.0.0'<br>        }).extend({<br>            layUploader:'uploader_ext/layUploader'<br>        }).use('layUploader',function () {<br>            var layUploader = layui.layUploader;<br>            var $=layui.$;<br>            $("#testdlg").click(function () {<br>                layUploader.render({<br>                    url:'/up',//上传文件服务器地址，必填<br>                    md5:'/md5',//md5验证地址，不填无md5验证，可不填<br>                    size:200*1024*1024,//单个文件大小，有默认值，可不填<br>                    fileType:'doc,docx'//允许上传文件格式,有默认值，可不填<br>                });<br><br>            });<br><br>        });<br>    &lt;/script&gt;</pre>
       <div class="layui-elem-quote">
         主要源码
       </div>
       <pre>layui.extend({<br>    //你的webuploader.js路径<br>    webuploader: 'uploader_ext/uploader/webuploader'<br>}).define(['layer','laytpl','table','element','webuploader'],function(exports){<br>    var $ = layui.$<br>        ,webUploader= layui.webuploader<br>        ,element = layui.element<br>        ,layer=layui.layer<br>        ,table=layui.table<br>        ,rowData=[]//保存上传文件属性集合,添加table用<br>        ,fileSize=100*1024*1024//默认上传文件大小<br>        ,fileType='doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip'<br>        ,uplaod;<br>    //加载样式<br>    layui.link('layui_exts/uploader_ext/uploader/webuploader.css');<br><br>    var Class = function (options) {<br>        var that = this;<br>        that.options=options;<br>        that.register();<br>        that.init();<br>        that.events();<br>    };<br><br>    Class.prototype.init=function(){<br>        var that = this,<br>            options=that.options;<br>        if(!that.strIsNull(options.size)){<br>            fileSize=options.size<br>        }<br>        if(!that.strIsNull(that.options.fileType)){<br>            fileType=that.options.fileType;<br>        }<br>        layer.open({<br>            type: 1,<br>            area: ['850px', '500px'], //宽高<br>            resize:false,<br>            content:<br>            '&lt;div  id="extend-upload-chooseFile" style="float: left;margin-left: 5px;margin-top: 5px;"&gt;选择文件&lt;/div&gt;'+<br>            '&lt;button id="extent-button-uploader" class="layui-btn" style="height: 37px;margin-top: 5px;margin-left: 5px;"&gt;开始上传&lt;/button&gt;'+<br>            '&lt;table style="margin-top:-10px;" class="layui-table" id="extend-uploader-form" lay-filter="extend-uploader-form"&gt;' +<br>                '  &lt;thead&gt;' +<br>            '    &lt;tr&gt;' +<br>            '      &lt;th lay-data="{type:\'numbers\', fixed:\'left\'}"&gt;&lt;/th&gt;' +<br>            '      &lt;th lay-data="{field:\'fileName\', width:250}"&gt;文件名称&lt;/th&gt;' +<br>            '      &lt;th lay-data="{field:\'fileSize\', width:100}"&gt;文件大小&lt;/th&gt;' +<br>            '      &lt;th lay-data="{field:\'validateMd5\', width:120}"&gt;文件验证&lt;/th&gt;' +<br>            '      &lt;th lay-data="{field:\'progress\',width: 200,templet:\'#button-form-optProcess\'}"&gt;进度&lt;/th&gt;' +<br>            '      &lt;th lay-data="{field:\'oper\', width: 100,templet: \'#button-form-uploadTalbe\'}"&gt;操作&lt;/th&gt;' +<br>            '    &lt;/tr&gt;' +<br>            '  &lt;/thead&gt;'+<br>            '&lt;/table&gt;'+<br>            '&lt;script type="text/html" id="button-form-uploadTalbe"&gt;'+<br>                '&lt;a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"&gt;删除&lt;/a&gt;'+<br>            '&lt;/script&gt;'+<br>            '&lt;script type="text/html" id="button-form-optProcess"&gt;' +<br>                '&lt;div style="margin-top: 5px;" class="layui-progress layui-progress-big" lay-filter="{{d.fileId}}"  lay-showPercent="true"&gt;'+<br>                  '&lt;div class="layui-progress-bar layui-bg-blue" lay-percent="0%"&gt;&lt;/div&gt;'+<br>                '&lt;/div&gt;'+<br>            '&lt;/script&gt;'<br>            ,<br><br>            success: function(layero, index){<br>                table.init('extend-uploader-form',{<br>                    height: 380,<br>                    unresize:true<br>                });<br>                console.log(options.url);<br>                uplaod = webUploader.create({<br>                    // 不压缩image<br>                    resize: false,<br>                    // swf文件路径<br>                    swf:  'src/lib/extend/uploader/Uploader.swf',<br>                    // 默认文件接收服务端。<br>                    server: options.url,<br>                    pick: '#extend-upload-chooseFile',<br>                    fileSingleSizeLimit:fileSize,//单个文件大小<br>                    //接收文件类型--自行添加options<br>                    accept:[{<br>                        title: 'file',<br>                        extensions: fileType,<br>                        mimeTypes: that.buildFileType(fileType)<br>                    }]<br>                });<br>            }//可以自行添加按钮关闭,关闭请清空rowData<br>            ,end:function () {<br>                rowData=[];<br>                if(options.success){<br>                    if(typeof options.success==='function') {<br>                        options.success();<br>                    }<br>                }<br>            }<br>        });<br>    };<br><br>    Class.prototype.formatFileSize=function(size){<br>        var fileSize =0;<br>        if(size/1024&gt;1024){<br>            var len = size/1024/1024;<br>            fileSize = len.toFixed(2) +"MB";<br>        }else if(size/1024/1024&gt;1024){<br>            var len = size/1024/1024;<br>            fileSize = len.toFixed(2)+"GB";<br>        }else{<br>            var len = size/1024;<br>            fileSize = len.toFixed(2)+"KB";<br>        }<br>        return fileSize;<br>    };<br><br>    Class.prototype.buildFileType=function (type) {<br>        var ts = type.split(',');<br>        var ty='';<br><br>        for(var i=0;i&lt;ts.length;i++){<br>            ty=ty+ "."+ts[i]+",";<br>        }<br>        return  ty.substring(0, ty.length - 1)<br>    };<br><br>    Class.prototype.strIsNull=function (str) {<br>        if(typeof str == "undefined" || str == null || str == "")<br>            return true;<br>        else<br>            return false;<br>    };<br><br>Class.prototype.events=function () {<br>        var that = this;<br>        //当文件添加进去<br>        uplaod.on('fileQueued', function( file ){<br>            var fileSize = that.formatFileSize(file.size);<br>            var row={fileId:file.id,fileName:file.name,fileSize:fileSize,validateMd5:'0%',progress:file.id,state:'就绪'};<br>            rowData.push(row);<br>            that.reloadData(rowData);<br>            element.render('progress');<br>        });<br><br>        //监听进度条,更新进度条信息<br>        uplaod.on( 'uploadProgress', function( file, percentage ) {<br>            element.progress(file.id, (percentage * 100).toFixed(0)+'%');<br>        });<br><br><br>        //错误信息监听<br>        uplaod.on('error', function(handler){<br>            if(handler=='F_EXCEED_SIZE'){<br>                layer.msg('上传的单个太大!。&lt;br&gt;操作无法进行,如有需求请联系管理员', {icon: 5});<br>            }else if(handler=='Q_TYPE_DENIED'){<br>                layer.msg('不允许上传此类文件!。&lt;br&gt;操作无法进行,如有需求请联系管理员', {icon: 5});<br>            }<br>        });<br><br><br>        //移除上传的文件<br>        table.on('tool(extend-uploader-form)', function(obj){<br>            var data = obj.data;<br>            if(obj.event === 'del'){<br>                that.removeArray(rowData,data.fileId);<br>                uplaod.removeFile(data.fileId,true);<br>                obj.del();<br>            }<br>        });<br><br>        //开始上传<br>        $("#extent-button-uploader").click(function () {<br>            that.uploadToServer();<br><br>        });<br><br>        //单个文件上传成功<br>        uplaod.on( 'uploadSuccess', function( file ) {<br>            that.setTableBtn(file.id,'完成');<br>        });<br><br>        //所有文件上传成功后<br>        uplaod.on('uploadFinished',function(){//成功后<br>            $("#extent-button-uploader").text("开始上传");<br>            $("#extent-button-uploader").removeClass('layui-btn-disabled');<br>        });<br><br>    };<br><br>    Class.prototype.reloadData=function(data){<br>        layui.table.reload('extend-uploader-form',{<br>            data : data<br>        });<br>    };<br><br>    Class.prototype.register=function () {<br>        var that = this,<br>            options = that.options;<br><br>        if(that.strIsNull(options.md5)) {<br>            return;<br>        }<br>        // 在文件开始发送前做些异步操作。做md5验证<br>        // WebUploader会等待此异步操作完成后，开始发送文件。<br>        webUploader.Uploader.register({<br>            "before-send-file":"beforeSendFile"<br>        },{<br>            beforeSendFile: function(file){<br>                var task = new $.Deferred();<br>                (new webUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){<br>                    var v = that.getTableHead('validateMd5');<br>                    var table = $("#extend-uploader-form").next().find('div[class="layui-table-body layui-table-main"]').find('table');<br>                    var pro = table.find('td[data-field="progress"]');<br>                    for(var i=0;i&lt;pro.length;i++){<br>                        var d = $(pro[i]).attr('data-content');<br>                        if(d==file.id ){<br>                            var t = $(pro[i]).prev();<br>                            t.empty();<br>                            t.append('&lt;div class="'+v+'"&gt;'+(percentage * 100).toFixed(0)+'%&lt;/div&gt;');<br>                        }<br>                    }<br>                }).then(function(val){<br>                    $.ajax({<br>                        type: "POST"<br>                        , url: options.md5<br>                        , data: {<br>                            type: "md5Check",md5: val //后台接收 String md5<br>                        }<br>                        , cache: false<br>                        , timeout: 3000<br>                        , dataType: "json"<br>                    }).then(function(data, textStatus, jqXHR){<br>                        if(data.data==0){   //若存在，这返回失败给WebUploader，表明该文件不需要上传<br>                            task.reject(); //<br>                            uplaod.skipFile(file);<br>                            that.setTableBtn(file.id,'秒传');<br>                            element.progress(file.id,'100%');<br>                        }else{<br>                            task.resolve();<br>                        }<br>                    }, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败，都触发重新上传<br>                        task.resolve();<br>                    });<br>                });<br>                return $.when(task);<br>            }<br>        });<br>    };<br><br><br>    /***<br>     * 注意更改了table列的位置,或自行新增了表格,请自行在这修改<br>     */<br>    Class.prototype.getTableHead=function (field) {<br>        //获取table头的单元格class,保证动态设置table内容后单元格不变形<br>        var div = $("#extend-uploader-form").next().find('div[class="layui-table-header"]');<br>        var div2 = div[0];<br>        var table = $(div2).find('table');<br>        var td = table.find('th[data-field="'+field+'"]').find('div').attr('class');<br>        return td;<br>    };<br><br>    Class.prototype.setTableBtn=function (fileId,val) {<br>        var td = this.getTableHead('oper');<br>        //获取操作栏,修改其状态<br>        var table = $("#extend-uploader-form").next().find('div[class="layui-table-body layui-table-main"]').find('table');<br>        var pro = table.find('td[data-field="progress"]');<br>        for(var i=0;i&lt;pro.length;i++){<br>            var d = $(pro[i]).attr('data-content');<br>            if(d==fileId ){<br>                var t = $(pro[i]).next();<br>                t.empty();<br>                t.append('&lt;div class="'+td+'"&gt;&lt;a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="ok"&gt;'+val+'&lt;/a&gt;&lt;/div&gt;')<br>            }<br>        }<br>    };<br><br><br>    Class.prototype.uploadToServer=function () {<br>        if(rowData.length&lt;=0){<br>            layer.msg('没有上传的文件', {icon: 5});<br>            return;<br>        }<br>        $("#extent-button-uploader").text("正在上传");<br>        $("#extent-button-uploader").addClass('layui-btn-disabled');<br>        uplaod.upload();<br>    };<br><br>    Class.prototype.removeArray=function (array,fileId) {<br>        for(var i=0;i&lt;array.length;i++){<br>            if(array[i].fileId==fileId){<br>                array.splice(i,1);<br>            }<br>        }<br>        return array;<br>    };<br><br>    var layUploader = {<br>        render:function (options) {<br>            var inst = new Class(options);<br>            return inst;<br>        }<br><br>    };<br><br>    exports('layUploader', layUploader);<br>});</pre>
       <hr>
       <div class="layui-elem-quote">
         之前弄的一个，有问题可在这里说，有时间回复
        <br>/jie/31616/
       </div> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/4966584_1543916830640_34278.rar" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>